<template>
  <el-container class="main">
    <el-aside
      class="ed-aside"
      width=""
    >
      <router layer="aside" />
    </el-aside>
    <el-container>
      <el-header>
        <ed-btn
          class="menu-switch"
          v-bind="menuBtn"
          :value="collapse"
          @click="onClick"
        />
        <router layer="toolbar" />
        <el-button
          icon="el-icon-user-solid"
          circle
        />
      </el-header>
      <el-main>
        <transition
          name="fade-transform"
          mode="out-in"
        >
          <router layer="main" />
        </transition>
        <!-- ev-dialog / -->
      </el-main>
      <el-footer><router layer="footer" /></el-footer>
    </el-container>
  </el-container>
</template>

<script>
import Router from '../views/Router'
import EdBtn from '../components/EdBtn'

/**
 * 管理界面
 *     管理 菜单视图、用户视图、状态栏视图
 *     通过 store 决定要渲染的内容视图
 */
export default {
  data () {
    return {
      menuBtn: {
        switch: true,
        icon: ['el-icon-s-fold', 'el-icon-s-unfold'],
        circle: true
      },
      collapse: false
    }
  },
  async mounted () {
    // 启动
    await this.reload()

    this.$http.beforeSend(this, (action) => {
      // 跳转
      if (!action || !action.redirect) return true

      const redirect = action.redirect
      const url = redirect.url || (redirect + '')
      const layer = redirect.layer || 'main'
      this.redirect({ url, layer })
      return false
    })
  },
  methods: {
    async reload () {
      const vm = this
      const url = this.$store.state.url
      // 获取配置信息
      const user = await this.$http.Get(url)

      // 绑定菜单视图
      this.$store.commit('setView', {
        layer: 'aside',
        name: 'EdMenu',
        definition: {
          items: [],
          collapse: vm.collapse,
          backgroundColor: '#545c64',
          textColor: '#fff',
          activeTextColor: '#ffd04b'
        },
        event: {
          select: vm.onSelect
        }
      })

      await this.$store.dispatch('reloadViewByUrl', {
        layer: 'aside',
        url: user.api.menu
      })
    },
    /**
     * 响应菜单，重置内容页面
     */
    async onSelect (index, indexPath, item) {
      await this.redirect({
        url: item.route.path
      })
    },

    async redirect ({ url, layer = 'main' }) {
      await this.$store.dispatch('reViewByUrl', {
        url, layer
      })
    },

    onClick () {
      this.collapse = !this.collapse
      const vm = this
      this.$store.commit('resetView', {
        layer: 'aside',
        definition: {
          collapse: vm.collapse
        }
      })
    }
  },
  components: {
    Router,
    EdBtn

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

@header: 60px;

.el-header, .el-footer {
  color: #333;
  height: @header;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-header {
  justify-content: space-between;
  padding-left: 0;
}

.el-footer {
  /*background-color: #B3C0D1;*/
}

.el-main {
  height: calc(100vh - @header - @header);
  width: 100%;
  position: relative;
  background-color: #E9EEF3;
  color: #333;
}
.el-aside {
  background-color: #545c64;
  overflow: hidden;
}

.el-menu:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.menu-switch {
  border: 0;
  margin-left: 5px;
}

.el-menu {
  border-right: 0;
}
</style>
